<template>
	<view class="irri-area">
		<intel-irri-area-title 
			class="title" 
			v-model="name" 
			@close="close"
			></intel-irri-area-title>
		<intel-valves 
			class="valves" 
			:valves="valves" 
			:irri-id="irriId"
			@edit="edit"
			></intel-valves>
		<intel-irri-model 
			class="model" 
			:limit="limit" 
			:timer="timer" 
			@timer-irrigation-start="timerStart"
			@timer-irrigation-add="timerAdd"
			@limit-irrigation-start="limitStart"
			></intel-irri-model>
	</view>
</template>

<script>
	import intelIrriAreaTitle from './intel-irri-area/intel-irri-area-title.vue'
	import intelValves from './intel-irri-area/intel-valves.vue'
	import intelIrriModel from './intel-irri-area/intel-irri-model.vue'
	export default {
		data() {
			return {
				// id: 0,
				// name: "八号工坊灌区1",
				// valves: [
				// 	{name:'1 号阀门', num: 0},
				// 	{name:'2 号阀门', num: 1},
				// 	{name:'3 号阀门', num: 2},
				// 	{name:'4 号阀门', num: 3},
				// 	{name:'5 号阀门', num: 4},
				// 	{name:'6 号阀门', num: 5},
				// ],
				timer: {
					state: true,
					hour: 10,
					minute: 2
				},
				limit: {
					state: false
				}
			}
		},
		methods:{
			close(){
				this.$emit('close')
			},
			edit(){
				this.$emit('edit')
			},
			timerStart(){
				this.$emit('timer-start')
			},
			timerAdd(){
				this.$emit('timer-add')
			},
			limitStart(){
				this.$emit('limit-start')
			}
		},
		watch:{
			name(val, old){
				console.log(val, old)
			}
		},
		props:{
			"irri-id": {
				type: Number,
				required: true
			},
			name: {
				type: String,
				required: true
			},
			valves: {
				type: Array,
				required: true
			},
		},
		components:{
			intelIrriAreaTitle,
			intelValves,
			intelIrriModel
		}
	}
</script>

<style lang="scss" scoped>
.irri-area{
	background: #F0FBF9;
	border: 1.17rpx solid #C0C9C7;
	border-radius: 11.76rpx;
	padding: 17.64rpx 36.47rpx 17.64rpx 51.76rpx;
	.title{
		margin: 20rpx 0 21.17rpx;
	}
	.model{
		border: 1.17rpx solid #3A615B;
		border-radius: 11.76rpx; 
		margin-top: 12.94rpx;
	}
}
</style>